<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息列表</title>

    <style>
        body {


            font: normal 14px auto “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

            color: #4f6b72;

            background: #FFF;

        }

        a {


            color: #c75f3e;

        }

        #mytable, #addStu, #queryStu {


            width: 700px;

            padding: 0;

            margin: 0 auto;

        }

        caption {


            padding: 0 0 5px 0;

            width: 700px;

            font: italic 14px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

            text-align: right;

        }

        th {


            font: bold 14px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

            color: #4f6b72;

            border-right: 1px solid #C1DAD7;

            border-bottom: 1px solid #C1DAD7;

            border-top: 1px solid #C1DAD7;

            letter-spacing: 2px;

            text-transform: uppercase;

            text-align: left;

            padding: 6px 6px 6px 12px;

            background: #CAE8EA no-repeat;

        }

        th.nobg {


            border-top: 0;

            border-left: 0;

            border-right: 1px solid #C1DAD7;

            background: none;

        }

        td {


            border-right: 1px solid #C1DAD7;

            border-bottom: 1px solid #C1DAD7;

            background: #fff;

            font-size: 14px;

            padding: 6px 6px 6px 12px;

            color: #4f6b72;

        }

        td.alt {


            background: #F5FAFA;

            color: #797268;

        }

        th.spec {


            border-left: 1px solid #C1DAD7;

            border-top: 0;

            background: #fff no-repeat;

            font: bold 14px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

        }

        th.specalt {


            border-left: 1px solid #C1DAD7;

            border-top: 0;

            background: #f5fafa no-repeat;

            font: bold 10px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

            color: #797268;

        }

        /*———for IE 5.x bug*/

        html > body td {
            font-size: 16px;
        }

        body, td, th {


            font-family: 宋体, Arial;

            font-size: 16px;

        }
    </style>

    <script>
        function queryAll() {
            //刷新表格
            var table = document.getElementById('mytable');
            // 获取表格对象
            var tbody = table.getElementsByTagName('tbody')[0];

            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://localhost:8090/user/queryAll', true);
            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 假设服务器返回JSON格式的响应
                    console.log(xhr.responseText);
                    const response = JSON.parse(xhr.responseText);
                    console.log(response.length);
                    if (response.length > 0) {
                        for (let i = 0; i < response.length; i++) {
                            //console.log(response[i].no);
                            // Create a new row
                            var newRow = tbody.insertRow();
                            newRow.id = "row_no_" + Number(response[i].no);

                            // 动态
                            var cell0 = newRow.insertCell(0);
                            var cell1 = newRow.insertCell(1);
                            var cell2 = newRow.insertCell(2);
                            var cell3 = newRow.insertCell(3);
                            var cell4 = newRow.insertCell(4);
                            var cell5 = newRow.insertCell(5);
                            var cell6 = newRow.insertCell(6);

                            cell0.innerText = response[i].no;
                            cell1.innerText = response[i].name;
                            cell2.innerText = response[i].sex;
                            cell3.innerText = response[i].age;
                            cell4.innerText = response[i].dept;
                            cell5.innerText = response[i].cls;
                            cell6.innerHTML = "<a href='#' onclick='remove(" + response[i].no + ")'>删除</a>";
                        }
                    }
                } else if (xhr.readyState === 4) {
                    alert('加载失败！');
                }
            };
            xhr.send();
        }

        //页面加载时
        window.onload = queryAll;

        //查询学生
        function query() {
            var table = document.getElementById('mytable');
            // 获取表格对象
            var tbody = table.getElementsByTagName('tbody')[0];
            //先移除界面上表格的所有行
            //tbody.rows.length
            const rowSize = tbody.rows.length;
            console.log("rows: " + rowSize);
            for (let i = 1; i < rowSize; i++) {
                tbody.deleteRow(1);
            }

            //再添加新的查询到表格
            //获取查询框的内容
            const no = document.getElementById('queryNo').value;
            let url = "http://localhost:8090/user/";
            if (no.length === 0) {
                //输入框为空则查询所有学生列表
                url += "queryAll";
                queryAll();
                return;
            } else {
                //否则查询指定学号的学生信息
                url += "query?no=" + no;
            }

            const xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 假设服务器返回JSON格式的响应
                    console.log(xhr.responseText);
                    if (xhr.responseText === "{}") {
                        return;
                    }
                    const response = JSON.parse(xhr.responseText);
                    //将查询内容显示到表格
                    var newRow = tbody.insertRow();
                    console.log(Number(response.no))
                    newRow.id = "row_no_" + Number(response.no);
                    console.log(newRow.id);
                    // 动态
                    var cell0 = newRow.insertCell(0);
                    var cell1 = newRow.insertCell(1);
                    var cell2 = newRow.insertCell(2);
                    var cell3 = newRow.insertCell(3);
                    var cell4 = newRow.insertCell(4);
                    var cell5 = newRow.insertCell(5);
                    var cell6 = newRow.insertCell(6);

                    cell0.innerText = response.no;
                    cell1.innerText = response.name;
                    cell2.innerText = response.sex;
                    cell3.innerText = response.age;
                    cell4.innerText = response.dept;
                    cell5.innerText = response.cls;
                    cell6.innerHTML = "<a href='#' onclick='remove(" + response.no + ")'>删除</a>";
                } else if (xhr.readyState === 4) {
                    alert('加载失败！');
                }
            };
            xhr.send();
        }

        //添加学生
        function add() {
            /*
            *学号：<input id="no"/><br><br>
            姓名：<input id="name" /><br><br>
            性别：<input id="sex" /><br><br>
            年龄：<input id="age" /><br><br>
            学院：<input id="dept" /><br><br>
            班级：<input id="class" /><br><br>
             */
            const no = document.getElementById('no').value;
            const password = document.getElementById('password').value;
            const name = document.getElementById('name').value;
            const sex = document.getElementById('sex').value;
            const age = document.getElementById('age').value;
            const dept = document.getElementById('dept').value;
            const cls = document.getElementById('class').value;

            if (!no || !name) {
                return;
            }

            const xhr = new XMLHttpRequest();
            var data = 'no=' + no + '&name=' + name + '&sex=' + sex + '&age=' + age + '&dept=' + dept + '&cls=' + cls + '&password=' + password;
            xhr.open('GET', 'http://localhost:8090/user/add?' + data, true);
            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 假设服务器返回JSON格式的响应
                    console.log(xhr.responseText);
                    const response = JSON.parse(xhr.responseText);

                    if (response.no !== "0") {
                        console.log(response.no);
                        alert("添加成功");
                        document.getElementById('no').value = "";
                        document.getElementById('name').value = "";
                        document.getElementById('sex').value = "";
                        document.getElementById('age').value = "";
                        document.getElementById('dept').value = "";
                        document.getElementById('class').value = "";
                        document.getElementById('password').value = "";

                        //刷新表格
                        var table = document.getElementById('mytable');
                        // 获取表格对象
                        var tbody = table.getElementsByTagName('tbody')[0];

                        // Create a new row
                        var newRow = tbody.insertRow();
                        console.log(Number(response.no))
                        newRow.id = "row_no_" + Number(response.no);
                        console.log(newRow.id);

                        // 动态
                        var cell0 = newRow.insertCell(0);
                        var cell1 = newRow.insertCell(1);
                        var cell2 = newRow.insertCell(2);
                        var cell3 = newRow.insertCell(3);
                        var cell4 = newRow.insertCell(4);
                        var cell5 = newRow.insertCell(5);
                        var cell6 = newRow.insertCell(6);

                        cell0.innerText = response.no;
                        cell1.innerText = response.name;
                        cell2.innerText = response.sex;
                        cell3.innerText = response.age;
                        cell4.innerText = response.dept;
                        cell5.innerText = response.cls;
                        cell6.innerHTML = "<a href='#' onclick='remove(" + response.no + ")'>删除</a>";

                    }
                } else if (xhr.readyState === 4) {
                    // 处理请求失败的情况
                }
            };
            xhr.send();
        }

        //删除学生
        function remove(no) {
            alert("学号为：[" + no + "]的学生将被删除");
            //先到web服务去删除
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://localhost:8090/user/delete?no=' + no, true);
            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 假设服务器返回JSON格式的响应
                    console.log(xhr.responseText);

                    if (xhr.responseText === no) {
                        alert('删除成功！');
                    }
                } else if (xhr.readyState === 4) {
                    alert('删除失败！');
                }
            };
            xhr.send();

            //再到界面删除
            //刷新表格
            var table = document.getElementById('mytable');
            // 获取表格对象
            var tbody = table.getElementsByTagName('tbody')[0];

            // Create a new row
            var removeRowId = "row_no_" + no;
            var row = document.getElementById(removeRowId);
            if (row) {
                tbody.removeChild(row);
            } else {
                console.log("not found row:" + row.id);
            }

        }
    </script>

</head>
<body>
<div style="text-align: center;font-size: 48px">学生信息管理</div>
<hr/>

<div id="addStu">
    学号：<input id="no"/><br><br>
    密码：<input id="password"/><br><br>
    姓名：<input id="name"/><br><br>
    性别：<input id="sex"/><br><br>
    年龄：<input id="age"/><br><br>
    学院：<input id="dept"/><br><br>
    班级：<input id="class"/><br><br>
    <button onclick="add()">添加</button>
    <br><br>
</div>

<hr>
<div id="queryStu">
    学号：<input id="queryNo"/>
    <button onclick="query()">查询</button>
</div>

<hr/>
<table id="mytable">
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>学院</th>
        <th>班级</th>
        <th>操作</th>
    </tr>

</table>

</body>
</html>